<template>
  <Modal
    class="settings"
    :show.sync="showModal"
    @closeAndClear="closeAndClearModal"
  >
    <template slot="title"> Settings </template>
    <template slot="body">
      <ModalGrid>
        <ControlWrapper title="Download Folder">
          <div class="settings__path" @click="setDownloadFolder">
            <div class="settings__path-control">
              {{ downloadPath || "No path specified" }}
            </div>
            <PathIcon class="settings__path-icon" />
          </div>
        </ControlWrapper>
        <ControlWrapper title="Workers per client">
          <template slot="descr">
            <div>
              Number of parallel workers taking care of Surge tasks. Decreasing
              can result in more stable connections. <b>(Default: 8)</b>
            </div>
          </template>
          <div class="settings__slider">
            <VueSlider
              class="settings__slider-control"
              v-if="showModal"
              v-model="numWorkers"
              :min="minWorkers"
              :max="maxWorkers"
              v-bind="sliderOptions"
            ></VueSlider>
            <Input
              class="settings__slider-input"
              v-model="numWorkers"
              type="number"
              theme="light"
              size="md"
              placeholder="1"
            />
          </div>
        </ControlWrapper>

        <ControlWrapper title="Number of NKN multiclients">
          <template slot="descr">
            <div>
              Number of NKN clients used per thread. A higher number increases
              reliability and reduces latency at the cost of more bandwidth
              usage. <b>(Default: 4)</b>
            </div>
          </template>
          <div class="settings__slider">
            <VueSlider
              class="settings__slider-control"
              v-if="showModal"
              v-model="numClients"
              :min="minClients"
              :max="maxClients"
              v-bind="sliderOptions"
            ></VueSlider>
            <Input
              class="settings__slider-input"
              v-model="numClients"
              type="number"
              theme="light"
              size="md"
              placeholder="1"
            />
          </div>
        </ControlWrapper>
        <ControlWrapper title="Logs">
          <template slot="descr">
            <div class="settings__logs">
              You can look through the surge logs and get more information about
              client processes.
              <PathIcon @click="openLogs" class="settings__path-icon" />
            </div>
          </template>
        </ControlWrapper>
      </ModalGrid>
    </template>
    <template slot="footer">
      <Button theme="default" size="md" @click="closeModal">Close</Button>
    </template>
  </Modal>
</template>

<style lang="scss">
@import "./SettingsModal.scss";
</style>

<script>
import FormMixin from "@/mixins/FormMixin.js";

import Modal from "@/components/Modals/Modal/Modal";
import ControlWrapper from "@/components/Controls/ControlWrapper/ControlWrapper";
import Input from "@/components/Controls/Input/Input";
import Button from "@/components/Button/Button";
import ModalGrid from "@/components/Modals/ModalGrid/ModalGrid";
import VueSlider from "vue-slider-component";
import PathIcon from "@/assets/icons/PathIcon.svg";

import {} from "vuex";

export default {
  mixins: [FormMixin],
  components: {
    Modal,
    ControlWrapper,
    Input,
    Button,
    ModalGrid,
    VueSlider,
    PathIcon,
  },
  data: () => {
    return {
      numWorkers: 8,
      minWorkers: 1,
      maxWorkers: 12,
      numClients: 8,
      minClients: 1,
      maxClients: 8,
      downloadPath: "",
      sliderOptions: {
        dotSize: 20,
        height: 2,
        tooltip: false,
      },
    };
  },
  watch: {
    showModal() {
      this.getDownloadPath();
      this.getNumClients();
      this.getNumWorkers();
    },
    numWorkers(newVal) {
      if (newVal > this.maxWorkers) {
        this.numWorkers = this.maxWorkers;
      }

      if (newVal < this.minWorkers) {
        this.numWorkers = this.minWorkers;
      }

      this.writeSetting("numWorkers", this.numWorkers);
    },
    numClients(newVal) {
      if (newVal > this.maxClients) {
        this.numClients = this.maxClients;
      }

      if (newVal < this.minClients) {
        this.numClients = this.minClients;
      }

      this.writeSetting("numClients", this.numClients);
    },
  },
  mounted() {},
  methods: {
    openLogs() {
      window.go.surge.MiddlewareFunctions.OpenLog();
    },
    writeSetting(k, v) {
      window.go.surge.MiddlewareFunctions.WriteSetting(`${k}`, `${v}`);
    },
    setDownloadFolder() {
      window.go.surge.MiddlewareFunctions.SetDownloadFolder().then(() => {
        this.getDownloadPath();
      });
    },
    getDownloadPath() {
      window.go.surge.MiddlewareFunctions.ReadSetting("downloadFolder").then(
        (res) => {
          this.downloadPath = res;
        }
      );
    },
    getNumClients() {
      window.go.surge.MiddlewareFunctions.ReadSetting("numClients").then(
        (res) => {
          this.numClients = Number(res);
        }
      );
    },
    getNumWorkers() {
      window.go.surge.MiddlewareFunctions.ReadSetting("numWorkers").then(
        (res) => {
          this.numWorkers = Number(res);
        }
      );
    },
  },
};
</script>
